﻿var Box = new Class({
    options: {
        width: 400,
        height: 400,
        title: '你好世界',
        html: '',
        url: null,
        target: null,
        zztarget: null,
        drag: true,
        resize: true,
        scroll: true,
        className: 'Box',
        isMouseDown: false,
        ttt: null,
        isie: true
    },
    initialize: function(option, obj) {
        this.setOptions(option);
    },
    run: function() {
        var sWidth = document.documentElement.clientWidth;
        var sHeight = 0;
        if (window.screen.availHeight > document.documentElement.scrollHeight) {
            sHeight = document.documentElement.clientHeight;
        } else {
            sHeight = document.documentElement.scrollHeight;
        }
        this.zztarget = document.createElement('div');
       // this.zztarget.style.backgroundColor = "black";
        this.zztarget.style.opacity = ".1";
        this.zztarget.style.filter = "Alpha(opacity=50);";
        if (document.all) {
            this.isie = true;
        } else {
            this.isie = false;
        }
        var This = this;
		
		
		var closeimg = document.createElement('img');
        closeimg.src = 'images/Box/close.gif';
        closeimg.style.width = '40px';
        closeimg.style.height = '20px';
        closeimg.style.position = "absolute";
        closeimg.style.right = "15px";
        closeimg.style.top = "10px";
        var i = 0;
        this.ttt = setInterval(function() {
            i = i + 5;
            if (This.isie) {
                This.zztarget.filters.alpha.opacity = (i++) ;
                if (i > 65) {
                    clearInterval(This.ttt);
						closeimg.onclick = function() {
							This.closeBox();
						}

                }
            } else {
                This.zztarget.style.opacity = parseFloat(This.zztarget.style.opacity) + 0.05;
                if (parseFloat(This.zztarget.style.opacity) > 0.65) {
                    clearInterval(This.ttt);
						closeimg.onclick = function() {
							This.closeBox();
						}
                }
            }
        }, 20);

        this.zztarget.id = "zzDiv";
        this.zztarget.style.width = sWidth + 'px';
        this.zztarget.style.height = sHeight + 'px';
        document.body.appendChild(this.zztarget);

        this.target = document.createElement('div');
        var topdiv = document.createElement('div');
        var leftdiv = document.createElement('div');
        var rightdiv = document.createElement('div');
        var bottomdiv = document.createElement('div');
        var contentdiv = document.createElement('div');

        var lt = document.createElement('div');
        lt.className = 'Box_lt';
        var rt = document.createElement('div');
        rt.className = 'Box_rt';
        var lb = document.createElement('div');
        lb.className = 'Box_lb';
        var rb = document.createElement('div');
        rb.className = 'Box_rb';

        topdiv.className = 'Box_topdiv';
        topdiv.innerHTML = this.title;
     
        topdiv.style.width = this.width - 32 + 'px';
        leftdiv.className = 'Box_leftdiv';
        rightdiv.className = 'Box_rightdiv';
        bottomdiv.className = 'Box_bottomdiv';
        bottomdiv.style.width = this.width - 32 + 'px';
        contentdiv.className = 'Box_contentdiv';
        contentdiv.style.width = this.width - 34 + 'px';
        contentdiv.style.height = this.height - 2 + 'px';
        if (this.url) {
            contentdiv.innerHTML = ' <iframe src="' + this.url + '" frameborder="0" width="100%" height="100%"></iframe>';
        } else {
            contentdiv.innerHTML = this.html;
            contentdiv.style.overflow = "auto";
        }
        this.target.id = 'BoxDiv';
        this.target.style.width = this.width + 'px';
        this.target.style.height = this.height + 'px';

        var MyDiv_w = this.getStyle(this.target, "width");
        var MyDiv_h = this.getStyle(this.target, "height");

        MyDiv_w = parseInt(MyDiv_w);
        MyDiv_h = parseInt(MyDiv_h);

        var width = this.pageWidth();
        var height = this.pageHeight();
        var left = this.leftPosition();
        var top = this.topPosition();

        var Div_topposition = top + (height / 2) - (MyDiv_h / 2);
        var Div_leftposition = left + (width / 2) - (MyDiv_w / 2);

        this.target.style.display = "block";
        this.target.style.width = this.width + 'px';
        this.target.style.left = Div_leftposition + "px";
        this.target.style.top = Div_topposition + "px";

        var titlediv = document.createElement('div');
        titlediv.className = 'Box_title';
        titlediv.appendChild(lt);
        titlediv.appendChild(topdiv);
        titlediv.appendChild(rt);
        topdiv.appendChild(closeimg);

        var bodydiv = document.createElement('div');
        bodydiv.className = 'Box_bodydiv';
        bodydiv.appendChild(leftdiv);
        bodydiv.appendChild(contentdiv);
        bodydiv.appendChild(rightdiv);
        bodydiv.style.width = this.width + 'px';


        var bomdiv = document.createElement('div');
        bomdiv.className = 'Box_bomdiv';

        bomdiv.appendChild(lb);
        bomdiv.appendChild(bottomdiv);
        bomdiv.appendChild(rb);

        bomdiv.style.width = this.width + 'px';


        this.target.appendChild(titlediv);
        this.target.appendChild(bodydiv);
        this.target.appendChild(bomdiv);
        if (this.drag) {
            this.ondrag();
        }

        if (this.resize) {
            this.onresize();
        }

        if (this.scroll) {
            this.onscroll();
        }

        document.body.appendChild(this.target);
        window.closeBox = this.closeBox;

    },
    onresize: function() {
        var This = this;
        window.onresize = function() {

            if (This.target) {
                var MyDiv_h = This.getStyle(This.target, "height");
                var MyDiv_w = This.getStyle(This.target, "width");
                MyDiv_h = parseInt(MyDiv_h);
                MyDiv_w = parseInt(MyDiv_w);
                var height = This.pageHeight();
                var width = This.pageWidth();
                var top = This.topPosition();
                var left = This.leftPosition();
                var Div_topposition = top + (height / 2) - (MyDiv_h / 2);
                var Div_leftposition = left + (width / 2) - (MyDiv_w / 2);
                This.target.style.top = Div_topposition + "px";
                This.target.style.left = Div_leftposition + "px";
            }
        }

    },
    ondrag: function() {
        var This = this;
        document.documentElement.onmousedown = function(e) {
            var tag = e ? e.target : window.event.srcElement;
            if (tag.className == 'Box_topdiv') {
                this.isMouseDown = true;
            }
        }
        document.documentElement.onmouseup = function() {
            this.isMouseDown = false;
        }
        document.documentElement.onmousemove = function(e) {
            e = e ? e : window.event;

            if (this.isMouseDown) {
                var mrx = e.clientX - mx;
                var mry = e.clientY - my;
                This.target.style.left = parseInt(This.target.style.left) + mrx + "px";
                This.target.style.top = parseInt(This.target.style.top) + mry + "px";
            }
            mx = e.clientX;
            my = e.clientY;
        }
    },
    onscroll: function() {
        var This = this;
        window.onscroll = function() {

            if (This.target) {
                var MyDiv_h = This.getStyle(This.target, "height");
                MyDiv_h = parseInt(MyDiv_h);
                var height = This.pageHeight();
                var top = This.topPosition();
                var Div_topposition = top + (height / 2) - (MyDiv_h / 2);
                This.target.style.top = Div_topposition + "px";
            }
        }
    },
    getStyle: function(elem, name) {
        if (elem.style[name])
            return elem.style[name];
        else if (elem.currentStyle)
            return elem.currentStyle[name];
        else if (document.defaultView && document.defaultView.getComputedStyle) {
            name = name.replace(/([A-Z])/g, "-$1");
            name = name.toLowerCase();
            var s = document.defaultView.getComputedStyle(elem, null);

            return s && s.getPropertyValue(name);

        } else
            return null;
    },
    closeBox: function() {
        var This = this;
        var i = 65;
        this.ttt = setInterval(function() {
            if (This.isie) {
                i = i - 10;
				This.zztarget.filters.alpha.opacity = i ;
                if (i < 1) {
                    clearInterval(This.ttt);
                    document.body.removeChild(This.zztarget);
                    document.body.removeChild(This.target);
                }
            } else {
                This.zztarget.style.opacity = parseFloat(This.zztarget.style.opacity) - 0.1;
                if (parseFloat(This.zztarget.style.opacity) < 0.1) {
                    clearInterval(This.ttt);
                    document.body.removeChild(This.zztarget);
                    document.body.removeChild(This.target);
                }
            }
        }, 20);
    },
    pageWidth: function() {
        return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
    },
    pageHeight: function() {
        return window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null;
    },
    topPosition: function() {
        return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
    },
    leftPosition: function() {
        return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
    }
});



